<template>
  <div class="groupnews">
    <h1 class="groupnews_header" v-if="item.title">
      <div class="groupnews_header_title">{{ item.title }}</div>
      <div class="groupnews_header_slogan">
        {{ item.slogan }}
      </div>
      <div class="groupnews_header_more">
        <slot name="groupnewsHeaderRight" :item="item"></slot>
      </div>
    </h1>
    <div
      v-for="(item, index) in item.data"
      :key="'groupnews_index_' + index"
      class="groupnews_content"
    >
      <div class="groupnews_header">
        <div class="groupnews_header_img">
          <a :href="'pages/group-div?id=' + item.group.groupId">
            <img
              :style="{ width: 27 / 23.44 + 'rem', height: 27 / 23.44 + 'rem' }"
              :src="item.group.img"
              v-lazy="item.group.img"
            />
          </a>
        </div>
        <div class="groupnews_header_desc">
          <div class="groupnews_header_desc_header">
            <a :href="'pages/group-div?id=' + item.group.groupId">{{
              item.group.title
            }}</a>
          </div>
          <div class="groupnews_header_desc_aside">
            <div
              class="groupnews_header_desc_aside_status"
              v-if="item.group.status === true"
            >
              {{ item.group.status === true ? "已关注" : "关注" }}
            </div>
            <div class="groupnews_header_desc_aside_content">
              {{ item.group.desc }}
            </div>
          </div>
        </div>
        <div class="groupnews_header_handle" v-if="item.group.status !== true">
          <Button
            :item="{
              text:
                item.group.status === true
                  ? $t('lang.已关注')
                  : $t('lang.关注'),
              color: 'default',
            }"
          >
            <template v-slot:icon>
              <van-icon name="plus" />
            </template>
          </Button>
        </div>
      </div>
      <div
        class="groupnews_panel"
        :class="
          $Plugins.isArray(item.content.img)
            ? 'imglist'
            : item.content.aside.isMaxImg
            ? 'maximg'
            : ''
        "
      >
        <div class="groupnews_panel_left">
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
          >
            <div class="groupnews_panel_left_content">
              {{ item.content.text }}
            </div>
          </a>
          <div class="groupnews_panel_left_aside">
            <div class="groupnews_panel_left_aside_left">
              <a
                :href="
                  'pages/comment-div?id=' +
                    item.group.groupId +
                    '&contentId=' +
                    item.content.contentId +
                    '&commentId=' +
                    item.content.aside.comment.commentId
                "
                v-if="!item.content.aside.isComment"
              >
                {{ $t("lang.评论")
                }}{{ fixNumber(item.content.aside.comment.commentCount) }}
              </a>
            </div>
            <div class="groupnews_panel_left_aside_right">
              {{ fixTime(item.content.aside.time) }}
            </div>
          </div>
        </div>
        <div class="groupnews_panel_right">
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
            v-if="$Plugins.isArray(item.content.img)"
            style="width:100%;display:flex"
          >
            <div
              class="groupnews_panel_right_img"
              v-for="(img, gindex) in item.content.img"
              :key="'itemContentImg_' + gindex"
            >
              <img
                :style="{
                  width: '100%',
                  height: 80 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                v-lazy="img"
                :src="img"
              />
            </div>
          </a>
          <a
            :href="
              'pages/group-news-div?id=' +
                item.group.groupId +
                '&contentId=' +
                item.content.contentId
            "
            v-else
          >
            <div
              class="groupnews_panel_right_img"
              v-if="item.content.aside.isMaxImg"
            >
              <img
                :style="{
                  width: '100%',
                  height: 180 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                v-lazy="item.content.img"
                :src="item.content.img"
              />
            </div>
            <div class="groupnews_panel_right_img" v-else>
              <img
                :style="{
                  width: '100%',
                  height: 80 / 23.44 + 'rem',
                  'border-radius': 5 / 23.44 + 'rem',
                }"
                v-lazy="item.content.img"
                :src="item.content.img"
              />
            </div>
          </a>
        </div>
      </div>
      <div class="groupnews_tools" v-if="item.content.aside.isComment">
        <div class="groupnews_tools_left">
          <Button :item="item.aside.share">
            <template v-slot:icon>
              <van-icon name="share-o" />
            </template>
          </Button>
          <Button :item="item.aside.comment">
            <template v-slot:icon>
              <van-icon name="chat-o" />
            </template>
            <template v-slot:text>
              {{ fixNumber(item.content.aside.comment.commentCount) }}
            </template>
          </Button>
          <Button :item="item.aside.good">
            <template v-slot:icon>
              <van-icon name="good-job-o" />
            </template>
            <template v-slot:text>
              {{ fixNumber(item.content.aside.support.supportCount) }}
            </template>
          </Button>
        </div>
        <div class="groupnews_tools_right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "group-news",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Button: () =>
      import(/* webpackChunkName:'button' */ "../../components/button/button"),
  },
  data() {
    return {
      toolsText: [
        this.$t("lang.分享"),
        this.$t("lang.评论"),
        this.$t("lang.点赞"),
      ],
    };
  },
  methods: {
    followClickHandle() {},
    fixTime(t) {
      return this.$Plugins.timeago(new Date(t).getTime());
    },
    fixNumber(t) {
      return this.$Plugins.fixNumber(t, 100);
    },
  },
};
</script>

<style lang="less">
@percentage: 1%;
@base: 23.44rem;
.groupnews {
  padding: 0 (10 / @base);
  clear: both;
  background-color: #fff;
  font-size: (14 / @base);
  margin: (5 / @base) 0 0;
  h1 {
    &.groupnews_header {
      font-size: (14 / @base);
      line-height: (14 / @base);
      text-align: left;
      padding: (10 / @base) 0;
      display: flex;
      height: (15 / @base);
      overflow: hidden;
      div {
        width: 10%;
        &.groupnews_header_title {
          width: 25%;
          line-height: (14 / @base);
          overflow: hidden;
        }
        &.groupnews_header_slogan {
          width: 65%;
          font-size: (12 / @base);
          line-height: (14 / @base);
          color: #999;
          margin: 0 0 0 (10 / @base);
          font-weight: 400;
        }
        &.groupnews_header_more {
          font-size: (12 / @base);
          font-weight: 400;
        }
      }
    }
  }
  .groupnews_content {
    padding: (5 / @base) 0;
    .groupnews_header {
      display: flex;
      padding: 0 0 (10 / @base) 0;
      .groupnews_header_img {
        width: (27 / @base);
        height: (27 / @base);
        border-radius: (27 / @base);
        overflow: hidden;
        margin: (5 / @base) 0 0;
      }
      .groupnews_header_desc {
        text-align: left;
        margin: 0 0 0 (5 / @base);
        flex: 1;
        .groupnews_header_desc_header {
          font-size: (14 / @base);
        }
        .groupnews_header_desc_aside {
          display: flex;
          font-size: (12 / @base);
          color: #999999;
          .groupnews_header_desc_aside_status {
            margin: 0 (5 / @base) 0 0;
          }
          .groupnews_header_desc_aside_content {
          }
        }
      }
      .groupnews_header_handle {
        width: (70 / @base);
        margin: (2.5 / @base) 0 0;
        text-align: center;
      }
    }
    .groupnews_panel {
      display: flex;
      &.imglist {
        display: block;
        .groupnews_panel_left {
          width: 100%;
          .groupnews_panel_left_content {
            min-height: auto;
          }
          .groupnews_panel_left_aside {
            padding: (10 / @base) 0;
          }
        }
        .groupnews_panel_right {
          width: 100%;
          margin: 0;
          a {
            display: flex;
          }
          .groupnews_panel_right_img {
            width: (100/3 / @percentage);
            margin: 0 (5 / @base);
            &:first-child {
              margin: 0;
            }
            &:last-child {
              margin: 0;
            }
            img {
              width: 100%;
              height: 100%;
              background-color: #999;
              overflow: hidden;
            }
          }
        }
      }
      &.maximg {
        display: block;
        .groupnews_panel_left {
          width: 100%;
          .groupnews_panel_left_content {
            min-height: auto;
          }
          .groupnews_panel_left_aside {
            padding: (10 / @base) 0;
          }
        }
        .groupnews_panel_right {
          margin: 0;
          width: 100%;
          a {
            display: flex;
          }
          .groupnews_panel_right_img {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
              background-color: #999;
              overflow: hidden;
            }
          }
        }
      }
      .groupnews_panel_left {
        text-align: left;
        width: 60%;
        .groupnews_panel_left_content {
          font-size: (14 / @base);
          min-height: (65 / @base);
        }
        .groupnews_panel_left_aside {
          font-size: (10 / @base);
          color: #999999;
          display: flex;
          .groupnews_panel_left_aside_left {
            a {
              margin: 0 (5 / @base) 0 0;
              display: block;
            }
          }
          .groupnews_panel_left_aside_right {
          }
        }
      }
      .groupnews_panel_right {
        width: 40%;
        margin: 0 0 0 (5 / @base);
      }
    }
    .groupnews_tools {
      display: flex;
      padding: (10 / @base) 0 0;
      .groupnews_tools_left {
        width: 80%;
        display: flex;
        .custom_button {
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .groupnews_tools_right {
        width: 20%;
      }
    }
  }
}
</style>
